<template>
  <div class="main_conntainer" :style="{backgroundImage:`url(${bgImg})`}">
     <div class="container">
        <el-button type="primary" icon="el-icon-thumb" circle @click="showPictures" style="margin-bottom:10px"></el-button>
        <transition name="fade">
          <div v-if="show" class="pictures">
            <!-- <img src="./image1.png" alt="picture1">
            <img src="./image2.png" alt="picture2">
            <img src="./image3.png" alt="picture3"> -->

             <el-button type="primary" size="small" round  @click="PageOneFm">页面1</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageTwoFm">页面2</el-button>
             <el-button type="primary" size="small" round style="margin-top:10px" @click="PageSanFm">页面3</el-button>

          </div>
        </transition>
     </div>

  </div>
</template>

<script>

import protoRoot from "@/proto/proto.js";

export default {
  data() {
    return {
      websock: null,
      bgImg:"./picOne.png",
      show: false  // 是否显示图片
    }
  },
  beforeDestroy () {
     this.websock.close(); 
  },
  mounted(){
     this.initWebSocket();
    //  let  dataData = protoRoot.lookup("protocol.Login");
    //  let  dataDataOne=  dataData.create({ userId: 'BeiJing1-2', password: "1111",  });
    //  let  bufferData = dataData.encode(dataDataOne).finish();
    //  var arrayArr = Array.from(bufferData)
    // let btyeData= this.IntToBytesLittleEndian(1,4)  
    // let twoDataCommit=[...btyeData,...arrayArr]
    // let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
    //  console.log('MoveParm MoveParm')
    //  console.log(bufferData)
    //  console.log(arrayArr)
    //  console.log(btyeData)
    //  console.log(btyeDatTwo)
    //  console.log('MoveParm MoveParm')
    //  // 心跳，登录，登录返回（服务器发送），移动
    //  sendWebsocket('ws://123.249.69.100:9090', btyeDatTwo, this.wsMessage, this.wsError)
    //  // Array 转成 Uint8Array

  },
  methods: {
       initWebSocket(){ 
        if(typeof(WebSocket) === "undefined"){
          console.log("您的浏览器不支持WebSocket")
        }else{
          const wsurl = "ws://123.249.69.100:9090";
          // 实例化 WebSocket
          this.websock = new WebSocket(wsurl);
          this.websock.binaryType = 'arraybuffer'
          // 监听 WebSocket 连接
          this.websock.onopen = this.websocketonopen;
          // 监听 WebSocket 错误信息
          this.websock.onerror = this.websocketonerror;
          // 监听 WebSocket 消息
          this.websock.onmessage = this.websocketonmessage;
        
          this.websock.onclose = this.websocketclose;
        }
      },
      // 连接建立之后执行send方法发送数据
      websocketonopen(){
        console.log("socket连接成功")
        let  dataData = protoRoot.lookup("protocol.Login");
        let  dataDataOne=  dataData.create({ userId: 'BeiJing1-2', password: "1111",  });
        let  bufferData = dataData.encode(dataDataOne).finish();
        var arrayArr = Array.from(bufferData)
        let btyeData= this.IntToBytesLittleEndian(1,4)  
        let twoDataCommit=[...btyeData,...arrayArr]
        let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
        console.log('MoveParm MoveParm')
        console.log(bufferData)
        console.log(arrayArr)
        console.log(btyeData)
        console.log(btyeDatTwo)
        console.log('MoveParm MoveParm')
     
        this.websocketsend( btyeDatTwo );
      },
      // 连接建立失败重连
      websocketonerror(){
        console.log("连接错误");
        this.initWebSocket();
      },
      // 数据接收
      websocketonmessage(data){
        const dataJson = data
      const bf = dataJson.data;
      const newStart = bf.slice(0, 4); // 从0 - 9 不包括 10
      const newBEnd = bf.slice(4, 8); // 从0 - 9 不包括 10

      const uIntStart = new Uint8Array(newStart)
      var arrayStart = Array.from(uIntStart)
      const uIntEnd = new Uint8Array(newBEnd)
      let  dataData = protoRoot.lookup("protocol.LoginEnd");
      if(arrayStart.toString()==[2,0,0,0].toString()){
           console.log(dataData.decode(uIntEnd))
      }
       console.log( ' sucess sucess sucess' )
       console.log( dataJson )
       console.log(uIntStart)
       console.log(arrayStart)
       console.log(dataJson)
      //console.log(susData.decode())
      // console.log(dataJson)
      // console.log(dataJson.data)
      // console.log(newBf)
      //console.log(   String.fromCharCode.apply(null, new Uint8Array(newBEnd))  )
      console.log( ' sucess sucess sucess' )
      },
      // 数据发送
      websocketsend(Data){
        this.websock.send(Data);
      },
      // 关闭
      websocketclose(e){
        console.log('WebSocket 断开连接',e);
      },


      IntToBytesLittleEndian(number, length){
        var bytes = [];
        var i = 0;
        do {
        bytes[i++] = number & (255);
        number = number>>8;
        } while ( i < length )
        return bytes;
    },

    showPictures() {
      this.show = !this.show;  // 点击按钮后切换show的值，实现显隐效果
    },
    PageOneFm(){
      this.bgImg ="./picOne.png"; 
      let  dataData = protoRoot.lookup("protocol.Move");
     let  dataDataOne=  dataData.create({ x: 0, audio: "1",  });
     let  bufferData = dataData.encode(dataDataOne).finish();
     var arrayArr = Array.from(bufferData)
    let btyeData= this.IntToBytesLittleEndian(3,4)  
    let twoDataCommit=[...btyeData,...arrayArr]
    let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
     console.log('mmmmmmmmmmmmmm')
     console.log(bufferData)
     console.log(arrayArr)
     console.log(btyeData)
     console.log(btyeDatTwo)
     console.log('mmmmmmmmmmmmmmmmm')
    
     this.websocketsend( btyeDatTwo );

    },
    PageTwoFm(){
     this.bgImg ="./picTwo.png";
      let  dataData = protoRoot.lookup("protocol.Move");
     let  dataDataOne=  dataData.create({ x: -800, audio: "2",  });
     let  bufferData = dataData.encode(dataDataOne).finish();
     var arrayArr = Array.from(bufferData)
    let btyeData= this.IntToBytesLittleEndian(3,4)  
    let twoDataCommit=[...btyeData,...arrayArr]
    let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
     console.log('222222222222222222')
     console.log(bufferData)
     console.log(arrayArr)
     console.log(btyeData)
     console.log(btyeDatTwo)
     console.log('222222222222222222222')
     this.websocketsend( btyeDatTwo );

    },
    PageSanFm(){
     this.bgImg ="./picSan.png";
      let  dataData = protoRoot.lookup("protocol.Move");
     let  dataDataOne=  dataData.create({ x: 400, audio: "3",  });
     let  bufferData = dataData.encode(dataDataOne).finish();
     var arrayArr = Array.from(bufferData)
    let btyeData= this.IntToBytesLittleEndian(3,4)  
    let twoDataCommit=[...btyeData,...arrayArr]
    let btyeDatTwo=new Uint8Array(twoDataCommit).buffer
     console.log('222222222222222222')
     console.log(bufferData)
     console.log(arrayArr)
     console.log(btyeData)
     console.log(btyeDatTwo)
     console.log('222222222222222222222')
     this.websocketsend( btyeDatTwo );
    },
   

  }
}
</script>

<style scoped>
.main_conntainer{
  padding:8px;
  width: 100%;
  height:90vh;
  background-size: 100%;
  background-repeat: no-repeat;

}
.container {

}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.6s;
}

.fade-enter, .fade-leave-to {
  opacity:0.6 ;
}

.pictures {
  display: flex;
  flex-direction: column;
 align-items: baseline;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.pictures img {
  max-width: 100%;
  margin: 10px;
  /* position: ab; */
}
</style>